<template>
	<view class="">
		<swiper :indicator-dots="true" :autoplay="false" :interval="3000" :duration="500" style="height:200rpx;margin-bottom: 10rpx;"
		 indicator-color="#DBDBDB" indicator-active-color="#c40200">
			<swiper-item v-for="(item,index) in navlist" :key="index">
				<view class="services_logos" >
					<view class="services_logo" v-for="(item,index) in item" :key="index" @click="practiceNav(item.id)">
						<image :src="item.logo" mode="widthFix"></image>
						<view class="services_title">{{item.name}}</view>
					</view>
				</view>
			</swiper-item>

		</swiper>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
	
			}
		},
		props: {
			navlist: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			practiceNav(id){
				this.$u.route('/pages/HomeLnner/PracticeNav/PracticeNav', {
					id: id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.services_logos {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		.services_logo {
			text-align: center;
			image {
				width: 90rpx;
				height: 90rpx;
			}
			.services_title {
				margin-top: 0rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #333333;
			}
		}
	}
	
	/deep/.uni-swiper-dot {
		height: 14rpx;
		width: 14rpx; 
	}
	uni-swiper-item{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	/deep/.uni-swiper-dot-active {
		width: 24rpx;
		height: 14rpx;
		border-radius: 14rpx;
	}
</style>
